<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Lanzador de dados para Wave"
width="500"
thumbnail="dado.gif"
height="375"
author="Guillermo Heras, basado en gadget de Kerasiotis Vasileios (http://jeez.eu)"
author_email="guillermo.heras@gmail.com" />
<Content type="html"><![CDATA[
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.google.com/p/simple-dice-roller/source/browse/trunk/styles.css">
<script type="text/javascript">
function getVariable(element){
	var element;
	
	if(document.all){
		var fetchedVar = document.all(element);
	}else{
		var fetchedVar = document.getElementById(element);
	}
	
	return fetchedVar;
}

function tiraDado(caras){
	var caras;
	var res = Math.floor(Math.random()*caras)+1;
	var numTiradas = parseInt(wave.getState().get('numTiradas', '0'));
    wave.getState().submitDelta({'numTiradas': numTiradas + 1});
	
	wave.getState().submitDelta({'tirada'+numTirada:res});
	wave.getState().submitDelta({'caras'+numTirada:caras});	
}

function estadoActualizado() {
	var numTiradas;
	if(!wave.getState().get('numTiradas')) {
        numTiradas = 0;
	}
	else {
		numTiradas = wave.getState().get('numTiradas');
		var i = 0;		
		getVariable('tiradas').innerHTML = "";
		for (i=1;i<=numTiradas;i++) {
			getVariable('tiradas').innerHTML = "El resultado de la tirada del D" + wave.getState().get('caras'+i, '0') + " es " + wave.getState().get('tirada'+i, '0') + "<br>" + getVariable('tiradas').innerHTML;
		}
	} 
}

function init() {
	if (wave && wave.isInWaveContainer()) {
		wave.setStateCallback(estadoActualizado);
	}
}

gadgets.util.registerOnLoadHandler(init);
</script>
<style type="text/css">
body{
 width:500px;
 margin:0 auto;
 position:relative;
}

#container{
 background-color:magenta;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #000; padding: 10px;
}

#buttons{
 text-align:center;
 height:30px;
 padding:5px;
}

.button{
 padding:8px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #000; padding: 10px;
 background-color:white;
 font-family:verdana;
 font-weight:bold;
}

iframe{
 border:0px;
}

#feed,#sitelogo{
 background-color:white;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #000; padding: 10px;
}

#sitelogo{
 text-align:center;
}

#feed img{
 max-width:120px;
 max-height:120px;
}

a SPAN.button:hover{
 background-color:#000fff;
 color:white;
}

.counter,.title{
 font-weight:bold;
}

.date{
 color:gray;
 font-size:60%;
}
a{
 text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<div id="buttons">
 <a href="javascript:void(0);" onclick="tiraDado(4)"><span class='button'>D4</span></a>
 <a href="javascript:void(0);" onclick="tiraDado(6)"><span class='button'>D6</span></a>
 <a href="javascript:void(0);" onclick="tiraDado(8)"><span class='button'>D8</span></a>
 <a href="javascript:void(0);" onclick="tiraDado(10)"><span class='button'>D10</span></a>
 <a href="javascript:void(0);" onclick="tiraDado(12)"><span class='button'>D12</span></a>
 <a href="javascript:void(0);" onclick="tiraDado(20)"><span class='button'>D20</span></a>
 <a href="javascript:void(0);" onclick="tiraDado(100)"><span class='button'>D100</span></a>
</div>
<div id="tiradas"></div>
</div>
</body>
</html>
]]></Content>
</Module>

